<template>
  <div class="introduce">
    <h1 class="introduce-title">Patience is key in life</h1>
    <span class="introduce-text"> 耐心是生活的关键. </span>
    <div class="slider">
      <div
          v-for="(slide, index) in slides"
          :key="index"
          :style="{ transform: `translateX(${translateX}00%)` }"
          class="slide"
      >
        <div
            :style="{ backgroundImage: 'url(' + slide.image + ')' }"
            class="slide-container"
        >
          <div class="slide-info">
            <h2>{{ slide.title }}</h2>
            <p>{{ slide.text + "." }}</p>
          </div>
        </div>
      </div>
    </div>
    <button class="prev" @click="prevSlide">&#10094;</button>
    <button class="next" @click="nextSlide">&#10095;</button>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {throttle} from "@/utils/util";
import {getSlidesList} from "@/api/request";

interface Slide {
  title: string;
  image: string;
  text: string;
}

let slides = ref<Slide[]>([]);
const translateX = ref(0);

// 切换到前一个轮播项的函数
const prevSlide = throttle(() => {
  translateX.value++;
  if (translateX.value === 1) {
    translateX.value = -(slides.value.length - 3);
  }
}, 500);

// 切换到下一个轮播项的函数
const nextSlide = throttle(() => {
  translateX.value--;
  if (translateX.value === -(slides.value.length - 2)) {
    translateX.value = 0;
  }
}, 500);

// 定义统计数据的接口
interface Statistics {
  endVal: number;
  text: string;
}

// 使用 ref 创建响应式数据，并约束类型为 Statistics 数组
const statisticsList = ref<Statistics[]>([
  {endVal: 1000, text: "工作时间"},
  {endVal: 1000, text: "累计服务企业"},
  {endVal: 1655, text: "累计服务企业"},
  {endVal: 5555, text: "累计服务企业"},
]);

const intersectionObserver = new IntersectionObserver((entries) => {
  // entries 是一个 IntersectionObserverEntry 对象的数组
  if (entries[0].intersectionRatio > 0) {
    // 在这里添加 .fade-in 类来触发动画效果
    entries[0].target.classList.add("fade-in");
    //   // 停止观察已经进入视口的元素，以避免重复触发动画
    if (countToRefs.value) {
      countToRefs.value.forEach((item: any) => {
        item.start();
      });
    }
    intersectionObserver.unobserve(entries[0].target);
  }
});
// count组件实例
const countToRefs = ref([]);

// 开始监听
onMounted(() => {
  getSlidesList().then((res) => {
    slides.value = res.data;
  });
  const targetElement = document.querySelector(".introduce");
  if (targetElement) {
    intersectionObserver.observe(targetElement);
  }
});
</script>

<style lang="scss" scoped>
.introduce.fade-in {
  opacity: 1; /* 当添加 .fade-in 类时，透明度变为 1 */
  transform: translateY(0); /* 当添加 .fade-in 类时，偏移变为 0，即不偏移 */
}

.introduce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 初始时完全透明 */
  transform: translateY(400px); /* 初始时向下偏移 100% */
  transition: opacity 1s ease,
  transform 1s ease; /* 设置过渡效果 */
  height: 100vh;

  button {
    position: absolute;
    top: 55%;
    background: transparent;
    border: none;
    color: black;
    font-size: 30px;
    cursor: pointer;

    &.prev {
      left: 19%;
    }

    &.next {
      right: 19%;
    }
  }

  .introduce-title {
    font-size: 50px;
    font-weight: initial;
    line-height: 1.1; /* 设置行高为 1.6 倍字体大小 */
  }

  .introduce-text {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.6; /* 设置行高为 1.6 倍字体大小 */
    width: 30%;
    margin: 20px 0 50px 0;
    text-align: center;
    font-family: "宋体", serif;
  }

  .slider {
    position: relative;
    width: 60%;
    height: 500px;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap; /* 不换行 */

    .slide {
      flex: 0 0 calc(35% - 20px); /* 或者根据需要调整百分比 */
      height: 100%;
      justify-content: center;
      align-items: center;
      color: white;
      padding: 0 20px;
      transition: transform 1s ease,
      opacity 3s ease;

      .slide-container {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        cursor: pointer;
        transition: all 0.5s ease;
        background-position: bottom; /* 修改背景变形点为左上角 */
        position: relative;
        background-repeat: no-repeat;

        .slide-info {
          position: absolute;
          top: 300px;
          left: 0;
          z-index: 2;
          width: 100%;
          transition: all 1s ease;
          text-align: center;

          h2 {
            margin: 20px;
            font-size: 25px;
          }

          p {
            font-family: "宋体", serif;
            width: 80%;
            margin: 0 auto;
            font-size: 14px;
            letter-spacing: 1px;
            line-height: 1.4;
            opacity: 0;
            transition: opacity 1s ease;
          }
        }

        &:hover .slide-info {
          top: 40%;
        }

        &:hover .slide-info p {
          opacity: 1;
        }

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0); // 初始状态为完全透明
          z-index: 1; // 将其叠加在 .slide-container 上面
          transition: background-color 0.5s ease; // 添加过渡效果
        }

        &:hover {
          background-size: 110% 110%;

          &::before {
            background: rgba(0, 0, 0, 0.5); // 在悬停时设置为更暗的半透明黑色
          }
        }
      }

      h3 {
        margin: 0;
      }
    }
  }

  hr {
    height: 1px;
    width: 100%;
    margin-top: 100px;
  }

  .statistics {
    width: 48%;
    margin: 100px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .statistics-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      span {
        color: #5b39c9;
        font-size: 50px;
        font-weight: normal;
        margin-bottom: 10px;
        font-family: "宋体", serif;
      }

      p {
        font-size: 14px;
      }
    }
  }
}
</style>
